<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

onBeforeMount(() => {
    console.log('实例挂载之前-onBeforeMount');
})

onMounted(() => {
    console.log('实例挂载之后-onBeforeMount');
})

const age = ref(10)
onBeforeUpdate(() => {
    console.log('视图更新之前-onBeforeUpdate');
})

onUpdated(() => {
    console.log('视图更新之后-onUpdated');
})
onBeforeUnmount(() => {
    console.log('实例销毁之前-onBeforeUnmount');
})
onUnmounted(() => {
    console.log('实例销毁之后-onUnmounted');
})
</script>

<template>
    <div>
        <div>{{ age }}</div>
        <button @click="age++">年龄增加</button>
    </div>
</template>

<style scoped></style>